

  @media screen and (min-width: 768px) and (max-width:1370px){
    h1.english{
      /*padding-top: 2vw;*/
      top: 3vw;
    }
    .page section.pageTwo{ 
      background-size: 100vw 100vh;
      background-position: -369px 0!important;
    }
  }
  .page .mask{
      width: 100%;
      height: 100vh;
      position: absolute;
    }
   .page.init  .mask-left{
      height: 100vh;
      background-color: #3A2921;
      width: 25vw;
      border-left: 1px solid grey;
      z-index: -1;
      z-index: 20;
      position: absolute;
      animation: hide 1s 1;
      animation-delay: .5s;
      flex: 1;
    }
  .page.init .mask-left:before{
      content: '';
    height: 100vh;
    border-right: 1px solid grey;
    z-index: 3000;
      opacity: 0;
      color: white;
      font-size: 100px;
      transition: 0s;
      position: relative;
      z-index: 1;
      animation: hide 1s 1;
    }
   .page.init .mask-right{
      height: 100vh;
      background-color: antiquewhite;
      width: 0%;
      z-index: 20;
      position: absolute;
      animation: hide 1s 1;
      animation-delay: 1s;
      flex: 2;
    }
   .page .mask-right:after{
      content: '';
      color: white;
      position: absolute;
      right: 0;
    }

     @keyframes hide{
      0%{
        width: 0;
      }50%{
        width: 100%;
        opacity: 1;
      }100%{
        width: 100%;
        opacity: 0;
      }
    }

    .page{
      display: flex;
      font-family: 'microsoft yahei ui';
      text-align: left;
      left: 0;
      top: 0;
      position: absolute;
    }
    .page,
    section{
      width: 100%;
      height: 100%;
    }
   .page section.pageOne{
      flex: 1 0 37%;
       display: block;
      opacity: 0;
      height: 100vh;
    /* background: linear-gradient(to bottom, rgba(0,0,0,.2),rgba(0,0,0,.7)),url(https://images.unsplash.com/photo-1448932284983-0c7b152eba33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);*/
    /*background: #000;*/
     background: url('../images/section.jpg') ;
     background-position: 28px 18px;
    /* background-size:  100vh;*/
      /*background-color: #aca;*/
      transition: 1s;
      transition-delay: 1.5s;
          box-shadow: 3px -6px 5px 1px #3b3636;
      position: relative;
      z-index: 10;
    }
   .page .pageOne.show{
      opacity: 1;
    }
   .page .pageTwo.show{
      opacity: 1;
    }
   .page section.pageTwo{
      opacity: 0;
      height: 100vh;
      flex: 2 0 66.6%;
      /*background-color: antiquewhite;*/
      /*background: url(https://images.unsplash.com/photo-1497005367839-6e852de72767?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80);*/
     /*background: linear-gradient(to bottom, rgba(0,0,0,.2),rgba(0,0,0,.7)),url(https://images.unsplash.com/photo-1448932284983-0c7b152eba33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);*/
     /*background:url(https://images.unsplash.com/photo-1448932284983-0c7b152eba33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);*/
     /*background: url(https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);*/
     /*background: url(http://pluspng.com/img-png/confetti-hd-png-confetti-png-hd-png-image-1250.png);*/
     background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
     background-size: 400vw 400vh;
      background-position:0px 0px;
      transition: 2s;
      transition-delay: 2.3s;
      position: relative;
      animation: moveBackground 15s ease infinite;
    }
    @keyframes moveBackground{
      0%,100%{
        background-position: 0px 50%;
      }50%{
        background-position: 100% 50%;
      }
    }
    .page .intro-mask{
    width: 55.5vw;
    height: 80vh;
    position: absolute;
    background: rgba(255, 255, 255, 1);
    left: 2.2vw;
    top: 11.7vh;
    box-shadow: 7px 5px 20px 1px #868585;
    transition: .5s;
    }

   .page.init section.pageOne:after{
      content: '';
      display: none;
      position: absolute;
      top: 11.7vh;
      height: 80vh;
      width: 100%;
      margin-left: 2vw;
      opacity: 1;
      border-right: 5px solid;
      /*滚动条*/
      border-image: linear-gradient(to bottom,#000,#eaeaea) 30 30;   
      animation:showPage .1s 1;
    }
    @keyframes showPage{
      from{
        opacity: 0
      }to{
        opacity: 1;
      }
    }
    @keyframes showLine{
      from{
        height: 0vh;
      }to{
        height: 80vh;
      }
    }

   .page h1{
      text-align: center;
      font-family: 'Microsoft YaHei UI';
      font-size: 6vw;
      padding-top: 2vw 1vw;
      box-sizing: border-box;
      line-height: 200%;
      height: 5vw;
      font-weight: 200;
      position: relative;
      z-index: 20;
      color: white;
      text-transform:uppercase;
      transform: translateY(0);
      transition-delay: 6s;
      transition: .5s;
      opacity: 1;
    }
   .page h1.chinese{
      color: #222;
      width: 20vw;
      font-size: 5vw;
      text-align: left;
      transition-delay:.7s;
      padding-bottom: 3vw;
      margin-left: 1vw;
      margin-top: 5.9vw;
      position: relative;
    }

   .page .portrait1{
    width: 50%;
    margin: 5vw auto;
    display: block;
    }
   .page h1.english{
      margin-top: 50%;
      transform: translateY(-170%) translateX(3%);
      font-weight: bold;
      mix-blend-mode: screen;
      color: black;
    font-family: 'Dancing Script', cursive;
      background: white;
      height: 100px;
      line-height: 100px;
      transition-delay: 3.5s;
      transition: .5s;
    }
    .page h1.english:after{
    content: '';
    position: absolute;
    right: 5px;
    bottom: -12px;
    width: 0px;
    height: 0px;
    border: 12px solid transparent;
    transform: rotate(135deg);
    border-top-color: #676767;
    }
    .page h1.chinese.hide:after{
      width: 0;
    }
    h1.chinese span{
      position: relative;
      z-index: 3000;
    }
    h1.chinese:after{
    content: '123';
    left: -10px;
    top: 40px;
    height: 78%;
    width: 0px;
    position: absolute;
    color: transparent;
    z-index: 10;
    border-bottom: 36px solid #fff;
        transition: .5s;
    }


    h1.chinese:hover:after{
      width: 305px;      
    }

   .page h1.hide{
      opacity: 0;
    }
   .page .pageTwo{
      box-sizing: border-box;
      padding-left: 5vw;
      /*background:url('https://bhuti.co/site/assets/files/4411/bhuti_front.1000x0.jpg') no-repeat;*/
    }
   .page .introduce{
      margin-top: 6vw;
      opacity: 0;
      transform: translateY(20%);
      transition: 1s;
      transition-delay: 1.3s;
      padding-left: 3vw;
    }
   .page .introduce.show{
      opacity: 1;
      transform: translateY(0%);
    }
    


   .page .pageTwo img{
      width: 9.5vw;
      display: block;
      float: left;
      /*filter: drop-shadow(8px 8px 10px grey);*/
    }
   .page article{
      margin-top: -.3vw;   
      float: left;
      font-family: '微软雅黑';
      color: #222;
    }
   .page p.title{
      margin-top: 1.2vw;
      margin-left: -.8vw;
      color: #eaeaea;
      width:6vw;
      font-family: '微软雅黑';
      padding:1.2px 3.6px; 
      padding-top: 0vw;
      font-size: 1.08vw;
      box-sizing: border-box;
      position: relative;
      /*background: rgba(0,0,0,.7);*/
      /*box-shadow: 3.6px 2.4px #555;*/
          background-color:rgba(47,79,79,1) ;
      /*background-color: rgba(110, 190, 196,.5);*/
    }
    .page article p.title{
      margin-top: 2vw;

    }
    .page p.title:before{
         content: '';
    position: absolute;
    left: 4px;
    top: -5px;
    width: 100%;
    height: 100%;
    background-color: #f56c6c;
    z-index: -1;
    /*background-color: rgba(32,66,114,.5);*/

      /*background-color: rgba(110, 190, 196,.3);*/

    }
    .page p.title:after{
    content: '';
    position: absolute;
    left: -4px;
    top: 4px;
    width: 100%;
    height: 100%;
    /*background-color: #aaa;*/
    z-index: -1;
    /*background-color: rgba(255,6,24,.5);*/
    background-color: rgba(37, 20, 13, 0.3);
    }
   .page p.myintroduce{
    color: #222;
      position: relative;
      margin-left: .1vw;
      margin-top: 1vw;
      line-height: 1.8vw;
      font-weight: 200;
      font-size: 1.1vw;
      z-index: 100;
    }

   .page p.myintroduce:before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 10px;
      top: 10px;
      z-index: 10;
      background-color:transparent; 
    }
   .page .education{
      font-family: 'microsoft yahei ui';
      font-weight:200;
      transition: .8s;
      transform: translateY(-20px);
      transition-delay: 1.5s;
      opacity: 0;
      color: #222;
    }
    .page .education.show{
      transform: translateY(0px);
      opacity: 1;
    }
   .page .education li{
    
      padding: .5vw 0;
      font-size: 1vw;
    }
   .page .education p+li{
      padding-top: 1vw;
    }
   .page .education p.title{
      padding: .1vw .1vw .1vw .2vw;
    }
   .page .other-info{
      margin-top: 3vw;
      display: flex;
      flex-direction: row;
    }
   .page .hobbyImg{
      /*display: none;*/
      z-index: 10;
      width: 70.5%;
      padding-top: 1vw;
      padding-left: 0vw;
      position: relative;
      top: -2vw;
      /*background: rgba(0,0,0,.3);*/
      height: 16vh;
      transition: .5s;
      transform: translateY(0);
      display: flex;
      justify-content: center;
      align-content: center;
    }

   .page .hobby{
      /*margin-right: 150px;*/
      margin-top: 1.5vw;
      padding-top: 3vw;
      overflow: hidden;
      opacity: 0;
      transition: .8s;
      transform: translate(-10vw,-20px);

      transition-delay: 1.8s;
    }
    .page .hobby.show{
      transform: translate(-10vw,0px);
      opacity: 1;
    }
   .page .hobby p.title{
    width: 2.2vw;
    position: relative;
    float: right;
    top: -4vw;
    right: 4.2vw;
    padding: 0vw 0vw .2vw 0.3vw;
    left: -90%;
    font-size: .95vw;
    }
   .page .hobby img{
      width: 5vw;
      display: block;
      margin-top: 2vw;
      padding: 15px 15px;
      /*filter: brightness(%);*/
      position: relative;
      z-index: 10;
    }
   .page p.hobby{
      width: 140px;
      height: 100%;
    }

    .page .hobbyImg li{
      flex: 1;
      position: relative;
      z-index: 5;
    }
    .page .hobbyImg li:after{
      content: attr(data);
      z-index: 1;
      position: absolute;
      font-size: .8vw;
      color: black;
      left: 0;
      right: 0;
      /*margin-left: 20%;*/
      bottom: 0;
      bottom: -10px;
      opacity: 0;
      transition: .7s;
      transition-delay: .1s;
      transform: translateX(37%) translateY(-30px);
    }
    .page .hobbyImg li:before{
      content: '';
      display: none;
      position: absolute;
      font-size: 1vw;
      width:30px;
      height: 30px;
      border-left: 2px solid grey;
      color: white;
      left: 50%;
      margin-left: -.3vw;
      opacity:0;
      bottom: 10px;
      z-index: 50;
      transition: .4s;
    }
    .page .hobbyImg li:hover:before{
      opacity: 1;
    }
    .page .hobbyImg li:hover:after{
      transform: translateX(37%) translateY(20px) rotate(0deg);
      opacity: 1;
    }.page .hobbyImg li:hover img{
      transform: rotate(30deg);
    }
    .page .portImg{
      width: 14vw;
      height: 22vw;
      position: relative;
      margin: -100px auto;
      z-index: 100;
      opacity: 0;
      transition: 1s;
      transition-delay: .2s;
    }
    .page .portImg.show{
      opacity: 1;
    }
    .page .portImg img{
      display: block;
      top: 0;
      left: 0;
      /*filter: grayscale(30%) brightness(80%);*/
      position: absolute;
      width: 100%;
      z-index: 20;
      transition-property: left,z-index,transform;
      transition-delay: 0s,.3s,.3s;
      transition-duration: .3s,0s,.3s;
      transform: translate(-10px,-10px);
    }
    .page .portImg img.toggle{
      transition-property: transform,z-index,left;
      transition-delay: 0s,.3s,.3s;
      transition-duration: .3s,0s,.3s;
      transform: translate(170px,-10px);
      z-index: 10;
      left: -160px;
    }
    .page .portImg div{
      background-color: white;
      width: 100%;
      height: 100%;
      left: 10px;
      top: 10px;
      position: absolute;
      z-index: 10;
      transition-property: left,z-index,transform;
      transition-delay: 0s,.3s,.3s;
      transition-duration: .3s,0s,.3s;
      transform: translate(-10px,-10px);
      font-size: 1vw;
      background-color: #2a282b;
      color: white;
      font-weight: 200;
      /*z-index: 40;*/
      overflow:hidden;
    }
    .page .portImg div.toggle{
            transition-property: transform,z-index,left;
      transition-delay: 0s,.3s,.3s;
      transition-duration: .3s,0s,.3s;
      transform: translate(-150px,-10px);
      z-index: 20;
      left: 150px;
    }
    .page .portImg div:before{
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(122,122,122,.2);
      transform: translate(-50%,-5px) rotate(5deg) scale(1.02);
    }
    .page .portImg div h2{
      text-align: center;
      font-weight: 600;
      font-size: 2vw;
      padding: .5vw .2vw;
      margin-top: 1vw;
    }
    .page .portImg div p{
      padding: .2vw 1vw;
    }
    .page .portImg div p:last-child{
      padding-top: 1vw;
    }
    .page .portImg div p span{
      font-size: .9vw;
      display: block;
      padding-top: .3vw;
    }
  .page  .Switchslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #b5b5b8;
    -webkit-transition: .4s;
    transition: .4s;
  }

.page .switch {
  position: absolute;
  display: block;
  width: 60px;
  left: 0;
  right: 0;
  height: 34px;
  margin: 0 auto;
  bottom: 10%;
  z-index: 500;
}

.page .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.page .Switchslider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  box-shadow: -4px 2px 5px #000;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}


.page input:checked + .Switchslider:after{
    animation: blink2 4s infinite;
}
.page input:checked + .Switchslider {
  background-color: #2196F3;
}

.page input:focus + .Switchslider {
  box-shadow: 0 0 1px #2196F3;
}

.page input:checked + .Switchslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded Switchsliders */
.page .Switchslider.round {
  border-radius: 34px;
}

.page .Switchslider.round:before {
  border-radius: 50%;
}

img.palm5{
    width: 300px!important;
    height: auto;
    top: 337px;
    left: 1148px;
    z-index: 3000;
    transform-origin: 0% 0%;
    transform: rotate(270deg) translate(10%,10%);
    position: absolute;
    transition: 1s;
    animation: shakePalm 8s infinite;
}
img.palm5:hover{
  transform: rotate(290deg) translate(10%,10%) scale(1.2);
}
@keyframes shakePalm{
  0%{
        transform-origin: 0% 100%;
    transform: rotate(260deg) ;
  }
  50%{
        transform-origin: 0% 100%;
    transform: rotate(250deg) ;
  }100%{
        transform-origin: 0% 100%;
    transform: rotate(260deg) ;
  
  }
}

  
@media screen and (max-width: 768px) {
    .pageOne{
    display: none!important;
  }
  .mask{
    display: none!important;
  }
    .other-info{
      display: none!important;
    }
    h1.chinese{
        color: #222;
        width: 32vw!important;
        font-size: 10vw!important;
        text-align: left;
        padding-bottom: 3vw;
        margin-left: 1vw;
        margin-top: 5.9vw;
        position: relative;
    }
    .page article p.title {
    margin-top: 2vw;
    }
    .page p.myintroduce {
    color: #222;
    position: relative;
    margin-left: .1vw;
    margin-top: 1vw;
    line-height: 1.5rem;
    font-weight: 200;
    font-size: 1rem;
    z-index: 100;
    padding:1rem  1rem 0 0;
   }
   .introduce  p.title{
    margin-top: 5rem!important;
    width: 30%;
   }

}



   section.about-me{
    font-size: 80%;
      width: 60%;
      height: 21vw;
      font-family: 'microsoft yahei ui';
      margin: 30vh auto;
      display: flex;
      justify-content: space-between;
    }
    section.about-me .about-me-lfBox{
      flex: 1 0 45%;
      height: 100%;
      padding:0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    section.about-me div.img{
      flex: 1 0 45%;
      margin-left: 2.5vw;
      height: 100%;
      /*background-color: #aaa;*/
    }
   section.about-me h1{
    color: black;
      font-weight: 400;
      font-size: 3.1vw;
      margin-bottom: 1.08vw;
      position: relative;
      text-align: left;

    }
   section.about-me h1:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width:4.1vw;
      height: 100%;
      border-bottom: 3px solid #FC6060;
    }
   section.about-me .img img{
      height: 100%;
    }
    section.about-me .about-me-text{
      transform-style: preserve-3d;
    }
   section.about-me .about-me-text p{
      color: #2;
      padding: .9vw 0;
      font-weight: 400;
      font-size: .75rem;
      line-height: 150%;
    }
   section.about-me a{
      font-size: .85vw;
      width:20%;
      display: block;
      text-align: center;
      line-height: 250%;
      border-radius: 1vw;
      text-decoration: none;
      color: #222;
      position: relative;
      top: .2rem;
      font-family: 'microsoft yahei ui';
      border: 2px solid #FC6060;
      transition: .5s;
      overflow: hidden;
    }
    section.about-me a:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #FC6060;
      transition: .5s;
      transform: translateX(-100%);
    }
   section.about-me a:hover:after{
      transform: translateX(0%);
    }
    .page h1.english-heading{
      display: none;
      position: absolute;
      font-family: 'Dancing Script', cursive;
          left: 0%;
      margin-left: -50%;
      /*top: 10vw;*/
      color: black;
      width: 100%;
      margin: 0 auto;
    }
    @media screen and (max-width: 768px){
      section.about-me {
        width: 100%;
        margin: 0px auto;
        height: auto;
        flex-direction: column-reverse;
        left: 0;
        top: 0;
        position: absolute;
        /*flex-*/
      }
section.about-me div.img {
    flex: 1 0 45%;
    margin-left: -0.5vw;
    height: 100%;
  }
      section.about-me .img img{
        height: auto;
        width: 100%;
      }
      section.about-me .about-me-text .text-heading{
        text-align: center;
        margin: 2rem;
      }
      section.about-me .about-me-text .text-heading a{
            margin: auto;
      }
      section.about-me h1 {
        text-align: left;
        font-size: 1.1rem;
      }
      section.about-me .about-me-lfBox {
        padding: 1rem;
        height: 50vh;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-top: 1rem;
      }
      .img-mask-box{
        display: none;
      }
      section.about-me div.img li{
        display: none;
      }
      .rotateTwo{
        display: none;
      }
      .about-me .other-info{
        display: none;
      }
      .catBox{
        display: none;
      }
    }

    /*移动端结束*/
    @media screen and (min-width: 768px){
      .mask {
        transition: 1s;
        /*border-color: white;*/
      }
      .mask p{
        height: 0vh;
        transition: .5s;
        transition-delay: .5s;
      }

      .mask p:nth-child(1){
        position: absolute; left: 25%; width: 25%;height:0vh;border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
      }
      .mask p:nth-child(2){
        position: absolute;left: 50%; width: 25%;height: 0vh;border-right: 1px solid #ccc;
      }      
      .mask p.show{
        transition: 1.5s;
        transition-delay: .75s;
        height: 100vh!important;
      }
      .mask.show {
        transition: 1s;
        background-color: grey;
      }
      section.about-me div.img img{
        display: none;
      }
      section.about-me{
        border: 1px solid;
        flex-wrap: wrap;
      }
      .about-me-lfBox h1:before{
        content: '';
        position: absolute;
        left: 0;
        top:-32px;
        width: 0px;
        height: 100%;
        transition: .5s;
        z-index: -1;
        border-bottom: 30px solid #FC6060;
      }
      .about-me-lfBox h1:hover:before{
        width: 200px;
        z-index: -1;

      }
      section.about-me div.img {
        /*overflow: hidden;*/
        position: relative;
        /*background: url("https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1362&q=80");*/
      }
      section.about-me div.img .rotateOne{
        /*overflow: hidden;*/
        height: 100%;
      }
      section.about-me div.img .rotateOne li{
        background: url("../images/aboutme.jpg");
        background-size: 400% 100%;
        float: left;
        height: 100%;
        width: 25%;
      }
      section.about-me div.img .rotateOne li:nth-child(1){
        background-position: 0 0;
      }
      section.about-me div.img .rotateOne li:nth-child(2){
        background-position: -100% 0;
      }
      section.about-me div.img .rotateOne li:nth-child(3){
        background-position: -200% 0;
      }
      section.about-me div.img .rotateOne li:nth-child(4){
        background-position: -300% 0;
      }
     section.about-me div.img img{
        display: none;
      }
      .rotateAboutBox{
        width: 100%;
        height: 100%;
        transition: .8s;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px);
        
      }
      .rotateAboutBox.move{
        transition: .8s;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(500px);
      }
      .rotateTwo{
    background: rgba(0,0,0,.8);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
          transform-origin:bottom ; 
    overflow: hidden;
    transform: perspective(900px) rotateX(90deg) rotateY(0deg) translateY(-202px) translateZ(0px) translateX(0px) scale(0);
     }
     .rotateTwo.show:before{
        
        background: rgba(255,255,255,.1);
        transform: translate(-60%,-13%) rotate(10deg);
      }
      .rotateTwo:before{
        content: '';
        z-index: 2000;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translate(-60%,-13%) rotate(10deg);
      }
     .rotateTwo.show{
      /*padding: 1rem;*/
          background: rgba(0,0,0,.8);
          transform-origin:bottom ; 
          transition: 1.3s;
         transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(-10.5vw) translateZ(-900px) translateX(0px) scale(1);
     }


     .rotateTwo .more-info{
      opacity: 1;
      padding: 1rem;
     }
     .rotateTwo .more-info h2{
      padding: 1rem 0rem;
     }
     .rotateTwo .more-info li,
     .rotateTwo .more-info span{
      line-height: 150%;
      font-size: .8rem;
      font-weight: 200;
     }
     section.about-me div.img{
      overflow: hidden;
      filter: drop-shadow(3px 3px 5px black);
     }
      section.about-me div.img .rotateOne{
        opacity: 0;
        transition-delay: 2s;
        transition: 1s;
      }
      section.about-me div.img .rotateOne.init{
      opacity: 1;
        transition-delay: 3.2s;
     box-shadow: 10px 10px 10px #ccc;
     }    

     .rotateOne li{
      opacity: 0;
     }
     .rotateOne.init li{
      opacity: 1;
      transition: 1s;
     }



     .img-mask-box{
      position: absolute;
      width: 0%;
      left: 0;
      /*transform: translateX(-100%);*/
      height: 100%;
      background-color: #690a0e;
      opacity: 1;
      z-index: 1000;
     }
     
     .img-mask-box.init{
      z-index: 1000;
      width:100%;
      /*transform: translateX(0%);*/
      opacity: 0;
      /*transition: 1s;*/
      /*transition-delay: 1s;*/
      animation: pageTwoInit 1.75s 1;
      animation-delay: 2.15s;
     }
     
     section.about-me .about-me-lfBox h1{
      opacity: 0;
      transform: translateY(130%);
      transition-delay: .5s;
     }
     section.about-me .about-me-lfBox .about-me-text p,
     section.about-me a{
      transition: 3s cubic-bezier(0,1.15,.93,1.14);
      opacity: 0;
      transform: translateY(130%) ;
     }
     section.about-me .about-me-lfBox.init  h1{
      transition-delay: .8s;
     }
     section.about-me .about-me-lfBox p:nth-child(1){
      transition-delay: 1s;
     }
     section.about-me .about-me-lfBox p:nth-child(2){
      transition-delay: 1.2s;
     }
     section.about-me .about-me-lfBox p:nth-child(3){
      transition-delay: 1.4s;
     }
     section.about-me .about-me-lfBox a{
      transition-delay: 1.6s;
     }
      section.about-me .about-me-lfBox.init .about-me-text p,
      section.about-me .about-me-lfBox.init  h1,
     section.about-me .about-me-lfBox.init a{
      opacity: 1;
      transform: translateX(0%);

     }
     section.about-me .about-me-lfBox a{
      background-color: #fff;
     }
     
     section.about-me .about-me-lfBox.init {
      opacity: 1;
      transform: translateX(0%);
     }


     }


    
    @keyframes pageTwoInit{
      0%{
        width: 0;
        opacity: 1;
      }
      30%{
        width: 100%;
        opacity: 1;
      }50%{
        opacity: 1;
        transform: translateX(0%);
      }75%{
        opacity: 1;
        }100%{
          width: 100%;
        opacity: 1;
        transform: translateX(100%);
        }

    }


  }